<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>副屏</title>
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入 Swiper CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="page-body">
        <div class="body-left">
          <div class="goods">
            <div class="goods-title">
              <div>数量</div>
              <div>原价(元)</div>
              <div>售价(元)</div>
              <div>金额(元)</div>
            </div>
            <div class="goods-list">
              <div class="good" v-for="(item, index) in goods" :key="index">
                <div class="cu">促</div>
                <div class="good-content flex-1 w-0">
                  <div class="font-size-14">{{item.name}}</div>
                  <div class="price-content flex align-center justify-between">
                    <div>x{{item.num}}</div>
                    <div class="text-line color-2">10.00</div>
                    <div>{{item.price}}</div>
                    <div>{{(item.num*item.price).toFixed(2)}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-total flex align-center justify-between">
              <div>合计</div>
              <div>
                <span>优惠</span>
                <span class="color-price font-weight-700">￥4.03</span>

                <span class="m-l-20">应付</span>
                <span class="color-price font-weight-700"
                  >￥<span class="font-size-24">66.00</span></span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="body-right">
          <!-- Swiper 容器 -->
          <div class="swiper">
            <div class="swiper-wrapper">
              <!-- 轮播项 -->
              <div
                class="swiper-slide"
                v-for="(image, index) in swiperConfig.imgUrls"
                :key="index"
              >
                <img class="item-img" :src="image" :alt="image" />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
          </div>
        </div>
      </div>

      <div v-if="!goods.length" class="fix-swiper">
        <div class="swiper">
          <div class="swiper-wrapper">
            <!-- 轮播项 -->
            <div
              class="swiper-slide"
              v-for="(image, index) in swiperConfig.imgUrls"
              :key="index"
            >
              <img class="item-img" :src="image" :alt="image" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->

          <!-- 如果需要导航按钮 -->
          <!-- <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div> -->

          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
        </div>
      </div>
    </div>
  </body>

  <!-- 引入 Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

  <script type="text/javascript">
    const { createApp, onMounted } = Vue;
    const app = createApp({
      data() {
        return {
          // 副屏设置
          settingConfig: {
            // 这里可以添加一些配置项
          },
          goods: [],
          swiperConfig: {
            carouselTime: "",
            imgUrls: [
              "http://39.105.217.164:8889/assets/logo-DqIUG4HZ.png",
              "http://39.105.217.164:8889/assets/logo-DqIUG4HZ.png",
              "http://39.105.217.164:8889/assets/logo-DqIUG4HZ.png",
            ],
          },
          swiperInstance: null,
          fixSwiperInstance: null,
        };
      },
      computed: {},
      mounted() {
        this.initSwiper();
        console.log("副屏mounted");
      },
      methods: {
        initSwiper() {
          this.swiperInstance = new Swiper(".swiper", {
            // 可选参数
            direction: "horizontal", // 垂直切换可选 'vertical'
            loop: true, // 循环模式
            autoplay: {
              delay: 3000, // 3秒切换一次
              disableOnInteraction: true, // 用户操作后继续自动播放
            },

            // // 如果需要分页器
            // pagination: {
            //   el: '.swiper-pagination',
            //   clickable: true,
            // },

            // // 如果需要前进后退按钮
            // navigation: {
            //   nextEl: '.swiper-button-next',
            //   prevEl: '.swiper-button-prev',
            // },

            // // 如果需要滚动条
            // scrollbar: {
            //   el: '.swiper-scrollbar',
            // },
          });

          this.$nextTick(() => {
            this.fixSwiperInstance = new Swiper(".fix-swiper .swiper", {
              // 可选参数
              direction: "horizontal", // 垂直切换可选 'vertical'
              loop: true, // 循环模式
              autoplay: {
                delay: 3000, // 3秒切换一次
                disableOnInteraction: true, // 用户操作后继续自动播放
              },
            });
          });
        },
        onSendData(data = {}, type = "setting") {
          console.log("副屏收到主屏消息", data);
          switch (type) {
            case "setting":
              this.settingConfig = data;
              break;
            case "goods":
              this.goods = data;
              break;
            default:
              data.imgUrls = data.imgUrls.split(",");
              this.swiperConfig.carouselTime = data.carouselTime;
              this.swiperConfig.imgUrls = data.imgUrls;
              this.swiperInstance.update();
              // this.swiperInstance.autoplay.start();
              break;
          }
          if (window.lyjsdk) {
            window.lyjsdk.sendToFirstScreen(
              "副屏收到消息了，我是副屏发给主屏的消息"
            );
          }
        },
      },
    });

    app.mount("#app");

    // 副屏接收主屏消息示例
    window.receiveData = function (result) {
      uni.showToast({icon: 'none',title: JSON.stringify(result.type)});
      const vm = app._instance.proxy;
      vm.onSendData(result.data, result.type);
    };
  </script>

  <style>
    /* 添加一些基本样式确保Swiper正常显示 */
    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* 你可以根据需要调整这些样式 */
    .body-right {
      height: 100%; /* 确保父容器有明确高度 */
      overflow: hidden; /* 防止内容溢出 */
    }
  </style>
</html>
